<template>
	<div :class="classes" :style="wrapStyles">
		<Notice
			v-for="notice in notices"
			:key="notice.name"
			:prefix-cls="prefixCls"
			:styles="notice.styles"
			:type="notice.type"
			:content="notice.content"
			:duration="notice.duration"
			:render="notice.render"
			:has-title="notice.hasTitle"
			:withIcon="notice.withIcon"
			:closable="notice.closable"
			:name="notice.name"
			:transition-name="notice.transitionName"
			:background="notice.background"
			:msg-type="notice.msgType"
			:on-close="notice.onClose"
		></Notice>
	</div>
</template>
<script lang="ts">
	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	import Notice from "./notify.vue";
	import { transferIndex, transferIncrease } from "../../utils/const";
	import { Noticeinfo } from "./noticeConfig";

	const prefixCls = "ivu-notification";
	let seed = 0;
	const now = Date.now();

	function getUuid() {
		return "ivuNotification_" + now + "_" + seed++;
	}

	@Component({
		components: { Notice }
	})
	export default class Notification extends Anes {
		@Prop({ type: String, default: prefixCls }) prefixCls!: string;
		@Prop({
			type: Object,
			default() {
				return {
					top: "65px",
					left: "50%"
				};
			}
		})
		styles!: object;

		@Prop() content!: string;
		@Prop() className!: string;
		@Prop() name!: string;

		notices = new Array<Noticeinfo>();
		tIndex = this.handleGetIndex();

		get classes() {
			return [
				`${this.prefixCls}`,
				{
					[`${this.className}`]: !!this.className
				}
			];
		}
		get wrapStyles() {
			const styles = Object.assign({}, this.styles);
			(styles as any)["z-index"] = 1010 + this.tIndex;

			return styles;
		}

		add(notice: Noticeinfo) {
			const name = notice.name || getUuid();

			const _notice = Object.assign(
				{
					styles: {
						right: "50%"
					},
					content: "",
					duration: 1.5,
					closable: false,
					name: name
				},
				notice
			);

			this.notices.push(_notice);
			this.tIndex = this.handleGetIndex();
		}
		close(name: string) {
			const notices = this.notices;
			for (let i = 0; i < notices.length; i++) {
				if (notices[i].name === name) {
					this.notices.splice(i, 1);
					break;
				}
			}
		}
		closeAll() {
			this.notices = [];
		}
		handleGetIndex() {
			transferIncrease();
			return transferIndex;
		}
	}
</script>
